<template>
  <vxe-modal id="permission" v-model="showDialog" title="权限列表" :destroy-on-close="true" width="50%" height="90%" show-footer>
    <el-tree :data="list" ref="tree" show-checkbox node-key="permissions_no" :default-expand-all="true" :default-checked-keys="hasPermissions" :props="defaultProps">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <i v-if="!data.children" class="el-icon-document"></i>
        <i v-else-if="node.expanded" class="el-icon-folder-opened"></i>
        <i v-else class="el-icon-folder"></i>
        <span :title="node.label || '-'">{{ node.label }}</span>
      </span>
    </el-tree>
    <template #footer>
      <el-button @click="close" size="mini">取消</el-button>
      <el-button type="success" @click="submit" size="mini">确认分配</el-button>
    </template>
  </vxe-modal>
</template>

<script>
import * as api from '@/api/template/permission';

export default {
  data() {
    return {
      showDialog: false,
      role_no: '',
      list: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      hasPermissions: []
    };
  },
  methods: {
    show(role_no) {
      this.showDialog = true;
      this.role_no = role_no;
      this.getList();
    },
    getList() {
      api.getList(this.role_no).then(res =>{
        this.list = res.list;
        this.hasPermissions = res.hasPermissions;
      })
    },
    submit() {
      var permission_nos = this.$refs.tree.getCheckedKeys(true);
      api.update(this.role_no,permission_nos).then(res =>{
        this.$message({
          message: res.msg,
          type: 'success'
        });
      })
    },
    close() {
      this.showDialog = false;
    }
  }
};
</script>
